<template>
  <div>
    <el-alert :closable="false" :title="`数据一共${counts}条`" show-icon>
    </el-alert>
    <div>
      <el-table
        class="table"
        :data="questionList"
        style="width: 100%"
        :header-cell-style="{
          borderBottom: '2px solid #e8e8e8',
          backgroundColor: '#fafafa',
        }"
      >
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="180">
        </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template slot-scope="scope">
              {{ scope.row.addDate | relativeTime }}
            </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
              <div>
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
              <div style="width:180px">
                <el-button @click="preview(scope.row)" plain size="small" type="primary" icon="el-icon-view" circle></el-button>
                <el-button @click="toEdit(scope.row)" plain size="small" type="success" icon="el-icon-edit" circle></el-button>
                <el-button @click="removeQuestion(scope.row)" plain size="small" type="danger" icon="el-icon-delete" circle></el-button>
                <el-button @click="choiceAdd(scope.row)" plain size="small" type="warning" icon="el-icon-star-off" circle></el-button>
              </div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页功能 -->
    <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper"
        background
        :total="counts"
      >
      </el-pagination>
      <!-- 分页功能 end-->
      <!-- 预览组件引入 start-->
      <questionsPreview :dialogVisible.sync="dialogVisible" :previewData="questionItem" :detailData="detailQuess"/>
      <!-- 预览组件引入 end-->
  </div>
</template>
<script>

// 引入预览组件
import questionsPreview from '../questions-preview.vue'
// 引入删除题库  引入添加精选 引入题库详情接口
import { remove as removeQues, choiceAdd as choiceAddQues, detail as detailQues } from '@/api/hmmm/questions'
export default {
  components: {
    questionsPreview
  },
  props: {
    counts: {
      type: Number,
      default: 0
    },
    questionList: {
      type: Array
    }
  },
  data () {
    return {
      currentPage4: 1,
      query: {
        page: 1,
        pagesize: 5
      },
      dialogVisible: false,
      questionItem: {},
      detailQuess: {}
    }
  },
  methods: {
    // 当页码发生变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.resetList()
    },

    // 当前页发生变化
    handleCurrentChange (val) {
      this.query.page = val
      this.resetList()
    },
    // 刷新页面
    resetList () {
      this.$emit('data-updated', { foo: 'bar' })
    },
    // 🦄 去修改试题的页面（路由传参）
    toEdit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    //  预览
    async preview (item) {
      // 显示对话框
      const { data } = await detailQues({ id: item.id })
      this.dialogVisible = true
      // 穿入行数据
      this.questionItem = item
      // 传入试题
      this.detailQuess = data
    },
    // 加入精选
    async choiceAdd (item) {
      const result = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      // 如果确认就加入精选 否则什么都不做
      if (result === 'confirm') {
        const data = await choiceAddQues({
          id: item.id,
          choiceState: 1
        })
        if (data.status === 200) {
          this.$message.success('加入精选成功')
        }
        // 更新题库列表
        this.resetList()
      }
    },
    //  删除题库中的题
    async removeQuestion (item) {
      // 提示框
      const result = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果确认删除执行删除逻辑
      if (result === 'confirm') {
        const data = await removeQues(item)
        // 如果状态码是200表示删除成功
        if (data.status === 200) {
          this.resetList()
          return this.$message.success('删除成功')
        }
      }
    }

  }
}
</script>
<style scoped lang="scss">
.block {
  margin-top: 20px;
  float: right;

  .table {
    margin-top: 20px;
  }
}
</style>
